<template>
  <div class="container">
    <div class="wrap">
      <div class="left">
        <Left @addPoint="addPoint" @dragPointLeft="dragPointLeft" />
      </div>
      <div class="right">
        <Right @addPointRight="addPointRight" @dragPointRight="dragPointRight" />
      </div>
      <div class="center">
        <div class="content">
          <flow-grid
            ref="myGrid"
            :flow-data="flowList"
            @click="clickNode"
            @delete="deleteEvn"
            @link="linkEvn"
          ></flow-grid>
        </div>
        <Foot ref="foot" class="foot" />
      </div>
    </div>
  </div>
</template>

<script>
import FlowGrid from "@/components/flow/grid.vue";
import { mapActions, mapMutations, mapGetters } from "vuex";
import Left from "./components/left";
import Right from "./components/right";
import Foot from "./components/foot";

export default {
  data() {
    return {
      msg: ""
    };
  },
  components: { Left, Right, FlowGrid, Foot },
  computed: {
    ...mapGetters(["getViewFoot", "getcheckFlag"]),
    flowList() {
      return this.$store.state.flow.flowList;
    }
  },
  methods: {
    ...mapMutations("flow", ["setFlowList"]),
    ...mapActions(["getList"]),
    // 树结构添加的回调
    addPoint(val) {
      this.$refs.myGrid.addNode(val);
    },
    deleteEvn(val) {
      // 是否删除的标志
      this.$store.commit("setDelFlag", true);
      // 清空底部试图
      this.$store.commit("setViewFoot", {});
      // 删除回显算子
      this.$store.commit("delOperatorInfo", val);

      // 删除提交算子
      this.$store.commit("delSubmitInfo", val);
    },
    linkEvn(node) {
      this.$store.commit("setIsLink", true);
      // 验证上一个表单
      if (
        node.viewFoot &&
        this.getViewFoot.viewFoot !== "Source" &&
        this.getViewFoot.viewFoot !== "OutPut" &&
        this.getViewFoot.viewFoot
      ) {
        const myRef = this.getViewFoot.viewFoot; // 上一步的组件名称
        this.$refs.foot.$refs[myRef].$refs.ruleForm.validate(valid => {
          if (valid) {
            this.$store.commit("setViewFoot", node);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        this.$store.commit("setViewFoot", node);
      }
    },
    // 右侧点击回调
    addPointRight(val) {
      this.$refs.myGrid.addNode(val);
    },
    dragPointLeft(evt, nodeMenu, mousePosition) {
      this.$refs.myGrid.dragAddNode(evt, nodeMenu, mousePosition);
    },
    dragPointRight(evt, nodeMenu, mousePosition) {
      this.$refs.myGrid.dragAddNode(evt, nodeMenu, mousePosition);
    },
    clickNode(node) {
      // 验证上一个表单
      if (
        node.viewFoot &&
        this.getViewFoot.viewFoot !== "Source" &&
        this.getViewFoot.viewFoot !== "OutPut" &&
        this.getViewFoot.viewFoot
      ) {
        const myRef = this.getViewFoot.viewFoot; // 上一步的组件名称
        this.$refs.foot.$refs[myRef].$refs.ruleForm.validate(valid => {
          if (valid) {
            this.$store.commit("setViewFoot", node);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        this.$store.commit("setViewFoot", node);
      }
    }
  },

  mounted() {
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  position: relative;
}
* {
  margin: 0;
  padding: 0;
}
html,
body,
.wrap {
  width: 100%;
  height: 100%;
}
.left {
  width: 260px;
  background: rgba(248, 249, 251, 1);
  box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.06);
  height: 100%;
  float: left;
}
.right {
  width: 260px;
  background: rgba(248, 249, 251, 1);
  box-shadow: -10px 0px 20px rgba(0, 0, 0, 0.06);
  height: 100%;
  float: right;
}
.center {
  height: 100%;
  overflow: hidden;
  flex-flow: column;
  display: flex;
}
.content {
  height: 585px;
  background-color: #f2f2f2;
}
.foot {
  flex: 1;
}
/deep/ {
  .el-table {
    padding: 0;
  }
}
</style>
